<template>
  <div>
    <el-form class="common-border pl10 pt10 pr10 mb10" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px" label-position="right">
      <div>
<!--        <el-form-item label="用户名称" prop="deptName">-->
<!--          <el-input-->
<!--            v-model="queryParams.deptName"-->
<!--            placeholder="用户名称"-->
<!--            clearable-->
<!--            style="width:220px"-->
<!--            :maxlength="50"-->
<!--            @keyup.enter.native="handleQuery"-->
<!--          />-->
<!--        </el-form-item>-->
        <el-form-item label="注册手机号" prop="phonenumber">
          <el-input
            v-model="queryParams.phonenumber"
            placeholder="注册手机号"
            clearable
            style="width:220px"
            :maxlength="50"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime">
          <el-date-picker
            style="width:220px"
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" size="mini" @click="handleQuery">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
<!--    <el-row class="common-border pl5 pt5 pb5 mb10">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          icon="el-icon-download"-->
<!--          type="primary"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--        >导出</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-table
      v-loading="loading"
      :data="list"
      v-table-height="{bottomOffset: 85,callback: height => tableHeight = height}"
      :max-height="tableHeight"
    >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="物流服务商" min-width="120" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
      <el-table-column label="物流服务商ID" min-width="120" align="center" prop="deptId" :show-overflow-tooltip="true" />
      <el-table-column label="注册手机号" min-width="120" align="center" prop="phonenumber" :show-overflow-tooltip="true" />
<!--      <el-table-column label="注册来源" min-width="120" align="center" prop="registrationSource" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="注册IP" min-width="120" align="center" prop="registerIP" :show-overflow-tooltip="true" />-->
      <el-table-column label="注册时间" min-width="120" align="center" prop="createTime" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="账号状态" min-width="120" align="center" prop="checkStatus" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.dept.status==='0'" type="success"><el-tag>启用</el-tag></span>
          <span v-else><el-tag type="info">禁用</el-tag></span>
        </template>
      </el-table-column>
<!--      <el-table-column label="账号等级" min-width="120" align="center" prop="level" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="生效时长" min-width="120" align="center" prop="effectiveDuration" :show-overflow-tooltip="true" />-->
<!--      <el-table-column label="备注" min-width="120" align="center" prop="desc" :show-overflow-tooltip="true" />-->
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="onPage"/>
  </div>
</template>

<script>
import { getUserList } from '@/api/login'

export default {
  name: "logisticsServiceProvider",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 查询参数
      queryParams: {
        deptName: undefined,
        phonenumber: undefined,
        creatTime: undefined
      },
      tableHeight: 0,
      // 日期范围
      dateRange: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true;
      getUserList(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      }).catch(err => {
        this.loading = false;
      })
      // getUserList({...this.queryParams,pageNum: this.pageNum,pageSize: this.pageSize}).then(res => {
      //   this.list = res.rows;
      //   this.total = res.total;
      //   this.loading = false;
      // }).catch(err => {
      //   this.loading = false;
      // })
    },
    onPage(e) {
      this.pageNum = e.page
      this.pageSize = e.limit
      this.getList()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleExport() {
      // this.$refs.edit.showDialog()
    },
  }
};
</script>

